<script setup lang="ts">
import { computed, ref } from 'vue';
import { Button, Card, Modal, Space, Table, Tag } from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import SurfaceDetailView from './SurfaceDetailView.vue';

interface SmileDelta {
  name: string;
  delta: number;
  value: number;
}

interface SmileCurve {
  term: number;
  expiryDate: string;
  deliveryDate: string;
  smileMap: Record<string, SmileDelta>;
  wingRatio: number;
  bidATM: number | null;
  askATM: number | null;
  premiumSpread: number | null;
  smileType: string;
  smileDeltaList: SmileDelta[];
}

interface VolatilitySurface {
  smileCurveList: SmileCurve[];
  surfaceName: string;
  currencyPair: string;
}

interface Props {
  volatilitySurfaceMap: Record<string, VolatilitySurface>;
}

const props = defineProps<Props>();

// 模态框状态
const isModalVisible = ref(false);
const selectedSurface = ref<VolatilitySurface | null>(null);

// 导出数据
const exportData = (surface: VolatilitySurface) => {
  const data = {
    surfaceName: surface.surfaceName,
    currencyPair: surface.currencyPair,
    smileCurveList: surface.smileCurveList.map((curve: SmileCurve) => ({
      term: curve.term,
      expiryDate: curve.expiryDate,
      deliveryDate: curve.deliveryDate,
      smileType: curve.smileType,
      wingRatio: curve.wingRatio,
      bidATM: curve.bidATM,
      askATM: curve.askATM,
      smileDeltaList: curve.smileDeltaList,
      smileMap: curve.smileMap
    }))
  };

  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${surface.surfaceName}_volatility_surface.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);

  window.$message?.success('数据导出成功');
};

// 查看曲面详情
const viewSurfaceDetail = (record: any) => {
  selectedSurface.value = record.surface;
  isModalVisible.value = true;
};

// 关闭模态框
const closeModal = () => {
  isModalVisible.value = false;
  selectedSurface.value = null;
};

// 导出曲面数据
const exportSurfaceData = (record: any) => {
  exportData(record.surface);
};

// 概览表格数据
const overviewData = computed(() => {
  return Object.entries(props.volatilitySurfaceMap).map(([key, surface]) => {
    return {
      key,
      currencyPair: surface.currencyPair,
      surfaceName: surface.surfaceName,
      surface
    };
  });
});

// 概览表格列定义
const overviewColumns: TableColumnsType = [
  {
    title: '货币对',
    dataIndex: 'currencyPair',
    key: 'currencyPair',
    width: 100,
    fixed: 'left'
  },
  {
    title: '曲面名称',
    dataIndex: 'surfaceName',
    key: 'surfaceName',
    width: 200
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    align: 'center'
  }
];
</script>

<template>
  <div class="volatility-surface-display">
    <Card title="波动率曲面" :bordered="false">
      <div v-if="overviewData.length === 0" class="empty-state">
        <p>暂无波动率曲面数据</p>
      </div>
      <div v-else>
        <!-- 曲面概览表格 -->
        <div class="surfaces-table-container">
          <div class="table-header">
            <span>共 {{ overviewData.length }} 个曲面</span>
          </div>

          <!-- 曲面概览表格 -->
          <div class="overview-table">
            <Table
              :columns="overviewColumns"
              :data-source="overviewData"
              :pagination="{ pageSize: 10, showSizeChanger: true, showQuickJumper: true }"
              size="small"
              :scroll="{ x: 800 }"
              row-key="key"
            >
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.key === 'action'">
                  <Space>
                    <Button type="link" size="small" @click="viewSurfaceDetail(record)">查看详情</Button>
                    <Button type="link" size="small" @click="exportSurfaceData(record)">导出数据</Button>
                  </Space>
                </template>
                <template v-else-if="column.key === 'currencyPair'">
                  <Tag color="blue">{{ text }}</Tag>
                </template>
              </template>
            </Table>
          </div>
        </div>

        <!-- 曲面详情模态框 -->
        <Modal v-model:open="isModalVisible" title="波动率曲面详情" width="90%" :footer="null" @cancel="closeModal">
          <SurfaceDetailView
            v-if="selectedSurface"
            :surface-data="selectedSurface"
            :surface-name="selectedSurface.surfaceName"
          />
        </Modal>
      </div>
    </Card>
  </div>
</template>

<style scoped>
.volatility-surface-display {
  margin-bottom: 16px;
}

.surfaces-table-container {
  margin-bottom: 16px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 8px;
  font-weight: 600;
  color: #333;
}

.surface-detail-modal {
  max-height: 70vh;
  overflow-y: auto;
}

.section {
  margin-bottom: 24px;
}

.section h4 {
  margin: 16px 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-left: 4px solid #1890ff;
  padding-left: 12px;
}

.curve-detail {
  padding: 8px 0;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
}

.overview-table :deep(.ant-table-thead > tr > th) {
  background-color: #f0f2f5;
  font-weight: 600;
  font-size: 13px;
}

:deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 600;
  font-size: 12px;
}

:deep(.ant-table-tbody > tr > td) {
  font-size: 12px;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 600;
}

:deep(.ant-statistic-title) {
  font-size: 12px;
  color: #666;
}

:deep(.ant-statistic-content) {
  font-size: 16px;
  font-weight: 600;
}

:deep(.ant-tabs-card > .ant-tabs-content) {
  margin-top: 0;
}

:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
  border-radius: 6px 6px 0 0;
}
</style>
